<template>
  <div>
    <el-form ref="formRef" :model="formData" :rules="formRule" label-width="120px" style="max-width: 1000px;">
      <el-form-item label="商品详情">
<!--        v-loading="videoLoading" element-loading-text="上传视频中，请耐心等待..."-->
        <div class="editor-box">
          <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="editorToolbarConfig" mode="default" />
          <Editor
              style="height: 440px; overflow-y: hidden"
              v-model="formData.content"
              :defaultConfig="editorConfig"
              mode="default"
              @onCreated="handleEditorCreated"
          />
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import {getCurrentInstance, ref, onMounted, shallowRef, reactive, onBeforeUnmount, watch} from "vue"
import { useRouter } from "vue-router"
import "@wangeditor/editor/dist/css/style.css"
import { Editor, Toolbar } from "@wangeditor/editor-for-vue"
/**
 * minxin编辑器
 */
import editorMixins from "@mixins/hook/editor"
const {
  editorRef, editorHtml, editorConfig, editorToolbarConfig, handleEditorCreated,htmlAddImgUrl,htmlRemoveImgUrl
} = editorMixins()

const router = useRouter()
const { proxy } = getCurrentInstance()

const formRef = ref(null)
const formData = reactive({
  content:''
})
const formRule = reactive({
  content: [{ required: true, message: "请输入内容", trigger: "blur" }],
})
const props = defineProps({
  detail:{
    type: Object,
    default: {},
  }
})
watch(() => props.detail, val => {
  if (val) {
    for (let key in formData){
      if(key === "content" && props.detail[key]){
        formData[key] = htmlAddImgUrl(props.detail[key]);
      }else{
        formData[key] = props.detail[key];
      }
    }
  } else {

  }
},{ deep: true, immediate: true });
onMounted(() => {
  // getClass()
})
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value
  // insertFns.value = null
  if (editor == null) return
  editor.destroy()
})


const submit = async () => {
  let flag = false;
  await formRef.value.validate((valid, fields) => {
    if (valid) {
      flag = true
    }
  })
  if(flag){
    let data = JSON.parse(JSON.stringify(formData));
    if(data.content){
      data.content = htmlRemoveImgUrl(data.content);
    }
    return data;
  }else{
    return false;
  }
}
defineExpose({
  submit
})

</script>


<style lang="less" scoped>
.editor-box {
  border: 1px solid #ccc;
  border-radius: 2px;
}

:deep(.el-date-editor) {
  width: 320px !important;

  .el-input__wrapper {
    width: 320px;
  }
}

.prize-upload {
  :deep(.el-upload--picture-card) {
    width: 120px;
    height: 120px;
    line-height: 120px;
    margin-bottom: 20px;
  }

  :deep(.el-upload-list__item) {
    width: 120px;
    height: 120px;
  }
}
</style>
